<template>
	<div class="algorithm-visualization">
		<el-row type="flex" justify="center">
			<el-col :span="12">
				<div id="array-box">
					<table class="variable-widgets">
						<tbody>
							<tr>
								<td><div id="array-next-name"></div></td>
								<td>
									<center>
										<div id="array-next"></div>
									</center>
								</td>
							</tr>
							<tr>
								<td><div id="array-t-origin-name"></div></td>
								<td>
									<center>
										<div id="array-t-origin"></div>
									</center>
								</td>
							</tr>
							<tr>
								<td><div id="array-t-compare-name"></div></td>
								<td>
									<center>
										<div id="array-t-compare"></div>
									</center>
								</td>
							</tr>																			
						</tbody>
					</table>
				</div>
			</el-col>
			<el-col :span="12">
				<div id="pseudocode" title="calculateNext(char *t, int *next):">
					next[0] = -1;
					int i = 0, j = -1;
					while (i < strlen(t) - 1)
					{
					    if (j == -1 || t[i] == t[j])
					    {
					        ++i;
					        ++j;
					        next[i] = j;
					    }	
					    else
					        j = next[j];
					}
				</div>
			</el-col>
		</el-row>
		<div id="controls" style="margin-top:20px"></div>
	</div>
</template>

<script>
export default {
	mounted() {
		let _this = this;
		let str = 'abcabcb';
		let defaultNextArray = [];
		
		for (let i = 0; i < str.length; i++)
			defaultNextArray[i] = ''
		
		$(function () {
			_this.service = new Vamonos.Visualizer({
						widgets: [
							new Vamonos.Widget.Hardcoded({ breakpoints: [1] }),

							new Vamonos.Widget.VarName({
								container: "array-t-origin-name",
								varName: "t",
							}),	
							
							new Vamonos.Widget.Array({
								container:    "array-t-origin",
								varName:      "tOrigin",
								defaultInput: str,
								cssRules: [
									[">", "i", "shaded"]
								],
								showIndices: ["i"],
							}),	
												
							new Vamonos.Widget.VarName({
								container: "array-t-compare-name",
								varName: "t",
							}),	
							
							new Vamonos.Widget.Array({
								container:    "array-t-compare",
								varName:      "pCompare",
								defaultInput: str,
								cssRules: [
									[">", "i", "shaded"]
								],								
								showIndices: ["j"],
							}),
							
							new Vamonos.Widget.VarName({
								container: "array-next-name",
								varName: "next",
							}),	
							
							new Vamonos.Widget.Array({
								container:    "array-next",
								varName:      "next",
								defaultInput: defaultNextArray
							}),

							new Vamonos.Widget.Controls({
								container:        "controls",
								runStopButton:    false,
								showWhileSliding: false
							}),
							
							new Vamonos.Widget.Pseudocode({
								container: "pseudocode",
								breakpoints: [1, 2, 3, 5, 7, 8, 9, 12]
							})							
						],
						autoStart: true,

						algorithm: function (_) {
							_(1);	this.next[0] = -1;
							_(2);	this.i = 0; this.j = -1;
							_(3); 	while (this.i < this.tOrigin.length - 1)
									{
							_(5);		if (this.j === -1 || this.tOrigin[this.i] == this.tOrigin[this.j])
										{
							_(7);			++this.i;
							_(8);			++this.j;
							_(9);			this.next[this.i] = this.j;
										}	
										else {
							_(12);			this.j = this.next[this.j];
										}
									}
						}
					});			
		});
	}
}
</script>

<style>
</style>
